<template>
  <div class="add-goods-ckassify">
    <el-card>
      <!-- 添加商品类 -->
      <el-form
        :model="infoForm"
        :rules="infoFormRules"
        ref="infoForm"
        label-width="120px"
      >
        <el-form-item label="分类图片：" prop="factory_name">
          <div class="factory-img-upload">
            <div class="factory-img-upload-btns">
              <el-upload
                action="fakeaction"
                :show-file-list="false"
                :http-request=" function (res) { return upload(res, 1); } "
              >
                <el-button type="primary" size="small">图片</el-button>
              </el-upload>
            </div>
            <div class="factory-img-upload-imgs">
              <el-image :src="infoForm.img">
                <div slot="error"></div>
              </el-image>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="分类名称：" prop="class_name">
            <el-input v-model="infoForm.class_name" placeholder="请输入风格名称" clearable  :style="{width:'300px'}"></el-input>
        </el-form-item>
        <el-form-item label="状态：" prop="sattus">
          <el-switch v-model="infoForm.status" :active-value="1" :inactive-value="2">
          </el-switch>
        </el-form-item>
        <el-button type="primary" style="margin-left: 38px;" @click="submitForm('infoForm')">保存</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      infoForm: {
        img: "",
        status: 1,
        class_name:'',
        store_id:localStorage.getItem('store_id'),
      },
      infoFormRules: {
          class_name: [{
						required: true,
						message: '请输入风格名称'
                    }],
            // sattus: [{
			// 			required: true,
			// 			message: '请输入状态'
			// 		}]
      },
    };
  },
  methods: {
    upload(params, type) {
      const file = params.file,
        isJPGPNG = file.type === "image/jpeg" || "image/png";
      if (!isJPGPNG) {
        this.$message.error("只能上传图片格式png、jpg!");
        return;
      }
      const form = new FormData();
      form.append("file[]", file);
      this.$http(this.$ApiList.publicUpload, form).then(res => {
				this.infoForm.img = res.datas[0];
	  });
    },
    submitForm(formName) {
        this.$refs[formName].validate(valid => {
            if (valid) {
                this.$http(this.$ApiList.UpGoodsClass, this.infoForm).then(res => {
                    this.$layer.msg(res.datas);
                    this.$router.push({
                        path: '/b_goods_classify'
                    });
                    console.log(this)
                });
            } else {
                this.$layer.msg('请填写完整信息后提交');
            }
        });
	}
  },
  mounted () {
      let class_id = this.$route.query.class_id
      if(class_id){
          this.$http(this.$ApiList.StoreGoodsClassItems,{class_id}).then(res=>{
              this.infoForm.img = res.datas.data[0].img;
              this.infoForm.status = res.datas.data[0].status;
              this.infoForm.class_name = res.datas.data[0].class_name;
              this.infoForm.class_id = res.datas.data[0].class_id;
          })
      }
  }
};
</script>

<style lang="scss" scoped>
.add-goods-ckassify {
  padding: 20px 20px;
  width: 100%;
}
</style>